<template>
  <a-drawer v-model:visible="visible" inner :z-index="10" :width="400" :styles="{ padding: 0 }">
    <div class="node-header">
      <div class="table-info-name t-ellipsis">{{ tableInfo.tableName }}</div>
      <div class="table-info-ds t-ellipsis">数据源：{{ tableInfo.title }}</div>
    </div>
    <div class="node-table-info">
      <div class="table-search-label mb-8" v-if="tableLabel">
        {{ tableLabel }}
      </div>
      <a-table
        size="small"
        :columns="columns"
        :data="tableInfo.fields"
        :max-height="400"
        @selection-change="setSelections"
        :pagination="false"
        sticky-header
        row-key="fieldId"
        :row-selection="{
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false,
          selectedRowKeys: selections.map((v) => v.fieldId)
        }"
      >
        <template #field="{ row }">
          <div class="field-label" flex="cross:center">
            <field-type-icon :type="row.dataType" />
            <span>{{ row.field }}</span>
          </div>
        </template>
      </a-table>
    </div>
    <template #footer>
      <a-button type="primary" size="small" transparent style="width: 120px" @click="visible = false">取消 </a-button>
      <a-button type="primary" size="small" style="width: 120px" @click="handleSave">确定 </a-button>
    </template>
  </a-drawer>
</template>

<script>
import { computed, reactive, ref, toRefs } from "vue"
import { Message } from "@arco-design/web-vue"
import tool from "@/utils/tool.js"

const { deepCopy, isEmpty } = tool
import FieldTypeIcon from "@/components/Service/LinkNode/field-type-icon.vue"

export default {
  name: "cube-node-edit",
  components: { FieldTypeIcon },
  emits: ["save"],
  setup(props, { emit }) {
    const visible = ref(false)

    const status = reactive({
      dataset: {},
      tableInfo: {},
      selections: []
    })

    const tableLabel = computed(() => {
      const fields = status.tableInfo.fields || []
      return isEmpty(fields) ? "" : `字段选择(${status.selections.length}/${fields.length})`
    })

    const open = (dataset, node) => {
      fetchTable(dataset, node)
      setSelections()
      visible.value = true
    }

    const handleSave = () => {
      const selected = status.selections
      if (selected.length === 0) {
        Message.error({ message: "请至少选择一个有效字段！", zIndex: 2500 })
        return
      }
      emit(
        "save",
        selected.map((v) => v.field)
      )
      visible.value = false
    }

    const fetchTable = (dataset, node) => {
      status.dataset = deepCopy(dataset)
      status.tableInfo = deepCopy(node)
    }

    // 设置已选项
    const setSelections = (selections) => {
      if (selections) {
        const list = selections.map((i) => {
          const find = status.tableInfo.fields.find((v) => v.fieldId === i)
          if (find) {
            find._checked = true
          }
          return find
        })
        status.selections = deepCopy(list)
      } else {
        const fields = status.tableInfo.fields || []
        status.selections = deepCopy(fields.filter((i) => i._checked))
      }
    }

    return {
      visible,
      tableLabel,
      ...toRefs(status),
      columns: [
        { title: "物理字段名", dataIndex: "field", tooltip: true },
        { title: "备注", dataIndex: "title", tooltip: true }
      ],
      setSelections,
      open,
      handleSave
    }
  }
}
</script>

<style scoped lang="less">
.node-header {
  padding: 16px 20px 12px;
  height: 88px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  .table-info-name {
    font-size: 18px;
  }

  .table-info-ds {
    font-size: 12px;
  }
}

.node-table-info {
  padding: 20px;
  height: calc(100% - 88px);
  overflow-y: auto;

  .field-label {
    > i {
      color: var(--bin-color-primary);
      margin-right: 4px;
    }
  }
}
</style>
